<template>
	<view class="wrapper">
		<view class="image-wrapper">
			<image :src="info.item.sthumb"></image>
		</view>
		<view class="price-wrapper">
			<p style="font-size: 1.2rem; color: #fa2828;">￥{{info.item.smoney}}</p>
			<p style="font-size: 0.9rem;">
				{{info.item.sname}}
			</p>
		</view>
		
		<uni-section title="商品介绍" type="line">
			<view style="padding: 15px;">
				<p v-html="info.contents"></p>
			</view>
		</uni-section>

		<view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
				@buttonClick="buttonClick" style="margin-top: 20px;" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				options: [],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #81c784, #4caf50)',
					color: '#fff'
				}]
			}
		},
		onLoad(option) {
			this.api_goods_detail(option.id)
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/pharmacy/placeOrder',
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detail', { data: this.info })
					}
				})
			},
			api_goods_detail(id) {
				this.$app._get('entry/wxapp/goods.detail', {
					sid: id
				}, (result) => {
					this.info = result
					console.log(result)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {

		.image-wrapper {
			image {
				width: 100%;
			}
		}
		
		.price-wrapper {
			background-color: #fff;
			padding: 8px;
			margin-bottom: 10px;
		}

		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}
	}
</style>